<template>
	<!-- @scrolltolower="scrolltolower"  :refresher-enabled="true" -->
	<scroll-view class="readingPage" :scroll-y="true" :scroll-with-animation="true" @scrolltolower="scrolltolower"
		v-if="currentData?.content.length" @click="showCtrl">

		<view class="img-item" v-for="i in currentData.content">
			<image :src="i" mode="widthFix" :lazy-load="true" />
		</view>


		<view class="btn-box" v-show="isShowBtn">
			<view class="ctrl-1" @tap.stop="addMyBooktore">
				<image class="ctrl-img" :src="imgBaseUrl + 'Frame 7625@2x.webp'" v-if="!indexItemData?.anime.is_collect" />
				<image class="ctrl-img" :src="imgBaseUrl + 'Frame 7625@2x (1).webp'" v-if="indexItemData?.anime.is_collect" />
				<view class="ctrl-text">追更</view>
			</view>
			<view class="ctrl-1" @tap.stop="geBock">
				<image class="ctrl-img" :src="imgBaseUrl + 'Frame 7626@2x.webp'" />
				<view class="ctrl-text">详情</view>
			</view>
			<view class="ctrl-1" @tap.stop="prevChapter">
				<image class="ctrl-img" :src="imgBaseUrl + 'Frame 7627@2x.webp'" />
				<button class="ctrl-btn-1">上一话</button>
			</view>
			<button @tap.stop="nextChapter" class="ctrl-btn-2">
				<image class="ctrl-img" :src="imgBaseUrl + 'Frame 7627@2x (1).webp'" />
				下一话
			</button>
		</view>

	</scroll-view>
	<UnlockVipModal ref="modal" :comicObjec="indexItemData" @maskClick="popupClose" @unLockSuccess="unLockSuccess" />
</template>

<script lang="ts" setup>
import { getCurrentInstance, ref } from "vue"
import { onLoad, onPageScroll, onUnload, onHide } from '@dcloudio/uni-app'
import { getReadingData, getBookAddMe, getBookDelMe, eventQuit, eventDuration, eventHistory, eventUser } from "@/api"
import UnlockVipModal from '@/components/unlock-vip-popup/unlock-vip-popup.vue'
import { useNextTick } from '@/hooks';

const bookId = ref(0)
const indexItemData = ref<API.BookReading>()
const currentData = ref<API.ChapsDetail>()
const isShowBtn = ref(false)
let startTime = new Date()

const modal = ref()
const { imgBaseUrl } = getCurrentInstance()?.proxy as any;
const nextTick = useNextTick()

const goVipPage = () => {
	eventUser({ event: 8 })
	modal.value.open()
}
const popupClose = () => {
	modal.value.close()
}

// 支付成功
const unLockSuccess = async () => {
	console.log('支付成功')
	getData(bookId.value, indexItemData.value?.next.chaps!)
}

// 显示底部操作
const showCtrl = () => {
	isShowBtn.value = !isShowBtn.value
}

const scrolltolower = (e: any) => {
	isShowBtn.value = true
}

const geBock = () => {
	uni.navigateTo({ url: `/pages/book-detail/index?&id=${indexItemData.value?.anime.id}` })
	// uni.navigateBack()
}

const addMyBooktore = async () => {
	if (indexItemData.value?.anime.is_collect) {
		await getBookDelMe(indexItemData.value?.anime.id!)
		indexItemData.value!.anime.is_collect = 0
		uni.showToast({ title: '取消收藏' })
	} else {
		await getBookAddMe(indexItemData.value?.anime.id!)
		indexItemData.value!.anime.is_collect = 1
		uni.showToast({ title: '收藏成功' })
	}
}
// 获取数据
const getData = async (id: number, chapter: number) => {
	currentData.value && (currentData.value!.content = [])
	uni.showLoading({ title: '加载中' })
	const { data } = await getReadingData(id, chapter)
	startTime = new Date()
	uni.hideLoading()
	indexItemData.value = data
	currentData.value = data.data
	// uni.setNavigationBarTitle({ title: indexItemData.value?.anime?.title ?? '' })
	// await nextTick()
	// uni.pageScrollTo({
	// 	selector: '.readingPage',
	// 	scrollTop: 0,
	// 	duration: 0
	// });
}

// 上一话
const prevChapter = async () => {
	if (!indexItemData.value?.prev.anid) return uni.showToast({ title: '已到达起始话数', icon: 'none' })

	eventDuration({ anid: indexItemData.value.anime.id, duration: new Date().getTime() - startTime.getTime() })

	getData(bookId.value, indexItemData.value?.prev.chaps!)

}

// 下一话
const nextChapter = async () => {
	if (!indexItemData.value?.next.anid) return uni.showToast({ title: '已到达最终话数', icon: 'none' })

	// 如果需要付费
	if (indexItemData.value?.next.is_vip) return goVipPage()

	eventDuration({ anid: indexItemData.value?.anime.id!, duration: new Date().getTime() - startTime.getTime() })

	eventHistory({ anid: indexItemData.value?.anime.id!, duration: new Date().getTime() - startTime.getTime(), chaps: indexItemData.value.data.chaps, rows: indexItemData.value?.data.content.length })

	getData(bookId.value, indexItemData.value?.next.chaps!)
}

// 页面传参
onLoad((query) => {
	console.log('参数：', query)
	const { id, chapter = 1 } = query as { id: number, chapter: number }
	bookId.value = id
	getData(id, chapter)
})

onPageScroll(({ scrollTop }) => {
	// console.log(scrollTop)
})

onUnload(() => {
	eventQuit({ anid: indexItemData.value?.anime.id!, quit: 1, rows: indexItemData.value?.data.content.length })
})

onHide(() => {
	eventQuit({ anid: indexItemData.value?.anime.id!, quit: 1, rows: indexItemData.value?.data.content.length })
})

</script>

<style lang="less" scoped>
.readingPage {
	width: 100vw;
	height: 100vh;
	overflow-y: auto;


	.img-item {
		width: 100%;
		height: auto;
		display: flex;

		image {
			width: 100%;
		}
	}

	.btn-box {
		width: 100%;
		height: 172rpx;
		position: sticky;
		bottom: 0;
		left: 0;
		background: #ffffff;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.ctrl-img {
			width: 48rpx;
			height: 48rpx;
		}

		.ctrl-text {
			margin-top: 4rpx;
			font-size: 20rpx;
			color: #666666;
		}

		.ctrl-1 {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-flow: column nowrap;
		}

		.ctrl-btn-1 {
			width: 60rpx;
			height: 28rpx;
			font-size: 20rpx;
			color: #666666;
			padding: 0;
			background-color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 6rpx 0 0 0;

			&::after {
				content: none;
			}
		}

		.ctrl-btn-2 {
			min-width: 276rpx;
			max-width: 464rpx;
			height: 72rpx;
			background: #0DA0FF;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0;
			flex: 1;

			&::after {
				content: none;
			}

			.ctrl-img {
				margin-right: 16rpx;
			}
		}

	}
}
</style>
